<template>
    <div style="padding:20px 20px 20px 20px;background:#fff;">
      <div class="moneyText">
        利润:{{enter.recharge_pay + enter.card_pay + enter.goods_pay - loss - goods.pay_money}}
      </div>
      <div class="table">
        <table border="0" width="45%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
          <tr>
            <td>营收合计:</td>
            <td colspan="2">{{enter.recharge_pay + enter.card_pay + enter.goods_pay}}</td>
          </tr>
          <tr>
            <td>营收项目</td>
            <td>应收金额</td>
            <td>实收金额</td>
          </tr>
          <tr>
            <td>充值合计</td>
            <td>{{enter.recharge}}</td>
            <td>{{enter.recharge_pay}}</td>
          </tr>
          <tr>
            <td>开卡合计</td>
            <td>{{enter.card}}</td>
            <td>{{enter.card_pay}}</td>
          </tr>
          <tr>
            <td>物品售卖</td>
            <td>{{enter.goods}}</td>
            <td>{{enter.goods_pay}}</td>
          </tr>
        </table>
        <table border="0" width="45%" cellspacing="0" cellpadding="0" style="margin-top:20px;border-collapse:collapse;">
          <tr>
            <td>支出合计:</td>
            <td colspan="2">{{loss + goods.pay_money}}</td>
          </tr>
          <tr>
            <td>支出项目</td>
            <td>应支金额</td>
            <td>实际支出</td>
          </tr>
          <tr>
            <td>物品入库</td>
            <td>{{goods.money}}</td>
            <td>{{goods.pay_money}}</td>
          </tr>
          <tr v-for="(item,index) in lossList" :key="index">
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
            <td>{{item.price}}</td>
          </tr>
        </table>
      </div>
</div>
</template>
<script>
export default {
  name: 'lossTable',
  props:['enter','loss','lossList','goods'],
  data(){
      return {
          currentPage:1, //初始页
          pagesize:10, //每页的数据
          show_page:true,
          nowpage:1,
          maxpage:10
      }
  },
  created: function() {
    
  },
  methods: {
    handleSizeChange: function (size) {
        this.pagesize = size;
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
    },
    changeLeft($event){
        $event.currentTarget.className="active";
    },
    removeLeft($event){
        $event.currentTarget.className ="tdclass";
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve()
      }, 1000)
    }
  }
};
</script>
<style>
.moneyText{
  width:95%;
	border:1px solid #C8C7CC;
	height:35px;
	line-height:35px;
	text-align: center;
  border-collapse:collapse;
}
.table{
  width:95%;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  padding-top:10px;
}

</style>